<template>
  <TableBox :data="table" :loading="table.loading" @searchBtn="getTbody">
    <template #search="{ search }">
      <ElFormItemBox label="资料名称" prop="likeWords">
        <ElInputBox :data="search" dataName="likeWords" />
      </ElFormItemBox>
      <ElFormItemBox label="资料类型" prop="informationType">
        <ElSelectBox :data="search" dataName="informationType" isAll :allValue="null" :options="options.type" />
      </ElFormItemBox>
    </template>
    <template #headR>
      <el-button type="primary" icon="Plus" @click="addBtn">新建</el-button>
    </template>
  </TableBox>
  <ElPupFormBox :pup="pupAdd">
    <ElFormItemBox label="资料名称" prop="informationName" isRules>
      <ElInputBox :data="pupAdd.form" dataName="informationName" />
    </ElFormItemBox>
    <ElFormItemBox label="资料类型" prop="informationType" isRules>
      <ElRadioBox :data="pupAdd.form" dataName="informationType" :options="options.type" />
    </ElFormItemBox>
    <ElFormItemBox label="资料文件" prop="file.fileUrl" isRules>
      <FileBox :data="pupAdd.form.file" v-if="pupAdd.form.file.fileUrl" />
      <ElUploadBox :data="pupAdd.form" type="all" @changeBtn="(files: any, dataInfo: any, res: any) => {
        pupAdd.form.fileIsChange = true
        pupAdd.form.file = {
          originalFileName: res.originalName, // 原始文件名
          fileType: res.fileSuffix, // 文件类型（文件后缀名）
          fileSize: res.fileSize, // 文件大小，单位：MB
          fileName: res.fileName, // 上传文件名
          fileUrl: res.fileUrl, // 上传文件路径（相对路径）
          filePreview: res.fileUrl // 预览图文件名
        }
        dataInfo.loading = false
      }" />
    </ElFormItemBox>
    <ElFormItemBox label="备注" prop="informationRemark">
      <ElInputBox :data="pupAdd.form" dataName="informationRemark" type="textarea" />
    </ElFormItemBox>
  </ElPupFormBox>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;//数据源
    customerCode?: string;//客户code
    isEdit?: boolean;//是否編輯
    options?: any;//数据组
    imageViewer?: any;//预览图片
  }>(),
  {
  },
);
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'saveBtn'): void;
}>();
//下拉-数据
const options = reactive({
  type: []
});
//弹窗-数据
const table = reactive({
  title: '客户资料',
  loading: true,
  search: {
    pageIndex: 1, //当前页码
    pageSize: 30, //每页显示数据的数量
    totalCount: 0, //总数量
    queryDataBaseFiled: "", // 关键字查询字段，空值查询全部
    likeWords: "", // 查询关键字，空值查询全部
    beginTime: "", // 日期范围-开始时间
    endTime: "", // 日期范围-结束时间
    onlySelf: 0, // 是否只查询自己创建的，0：查所有、1：只查自己创建的
    isShowDisabled: -1, // 是否显示禁用,-1：显示所有的；0：仅显示未作废的；1 仅显示作废的
    orderByFiled: "", // 排序字段
    orderByType: 0, // 排序方式，0-倒序,1-升序
    customerCode: "", // 客户代码，空值查询全部
    informationType: null, // 客户资料类型（外联字典明细表唯一识别码）【彩稿、客户样稿、清单、签样、排版图、资料等】

  },
  thead: [
    {
      label: '资料名称',
      prop: 'informationName',
      align: 'left',
      width: null,
    },
    {
      label: '资料类型',
      prop: 'informationTypeName',
      align: 'center',
      width: 160,
    },
    {
      label: '文件类型',
      prop: 'fileTypeName',
      align: 'center',
      width: 100,
    },
    {
      label: '文件大小',
      prop: 'fileSize',
      align: 'center',
      width: 100,
    },
    {
      label: '上传时间',
      prop: 'uploadDateTime',
      align: 'center',
      width: 180,
    },
    {
      label: '上传人员',
      prop: 'uploadPersonName',
      align: 'center',
      width: 100,
    },
    {
      label: '备注',
      prop: 'informationRemark',
      align: 'left',
      width: null,
    },
  ],
  tbody: [],
  //表格-列表搜索
  operation: [
    {
      title: '编辑',
      click: (row: any) => {
        proxy.$api.OrderBusniess.GetCustomerInformationDetail({
          informationID: row.informationID
        })
          .then((res: any) => {
            pupAdd.form = res
            proxy.$openPup(pupAdd, 1)
          }).catch(() => {
          })
      },
    },
    {
      title: '预览',
      click: (row: any) => {
        proxy.$api.OrderBusniess.PreviewInformationFile({
          informationID: row.informationID,
        })
          .then((res: any) => {
            window.open(res, '_blank');
          })
          .catch(() => { });
      },
    },
    {
      title: '下载',
      click: (row: any) => {
        proxy.$api.OrderBusniess.DownLoadInformationFile({
          informationID: row.informationID,
        })
          .then((res: any) => {
            proxy.$message(`下载成功`);
            proxy.$downloadUrl(res, row.informationName)
          })
          .catch(() => { });
      },
    },
    {
      title: '删除',
      click: (row: any, index: number) => {
        proxy.$messageBox('是否删除当前数据，请确认！', () => {
          proxy.$api.OrderBusniess.DeleteCustomerInformation({
            customerCode: props.customerCode,
            informationID: row.informationID,
          })
            .then((res: any) => {
              proxy.$message(`删除成功`);
              getTbody();
            })
            .catch(() => { });
        });
      },
    },
  ],
});
//弹窗-数据
const pupAdd = reactive({
  state: false,
  typeName: 0,
  title: `资料文件`,
  width: 600,
  height: 'auto',
  form: {
    informationID: '', // 客户资料主键ID
    informationCode: '', //客户资料唯一识别码
    customerCode: "", // 客户编码（唯一识别码）
    informationName: '', // 资料名称
    informationType: "", // 客户资料类型（外联字典明细表唯一识别码）
    informationRemark: "", // 资料备注
    fileIsChange: false, //文件是否改变：true表示改变，false表示没有改变
    file: {
      originalFileName: "", // 原始文件名
      fileType: "", // 文件类型（文件后缀名）
      fileSize: 0.0, // 文件大小，单位：MB
      fileName: "", // 上传文件名
      fileUrl: "", // 上传文件路径（相对路径）
      filePreview: "" // 预览图文件名
    }
  },
  btns: [
    {
      title: '保存',
      type: 'primary',
      click: (pup: any) => {
        pup.loading = true
        if (pup.form.informationCode) {
          //编辑
          proxy.$api.OrderBusniess.UpdateCustomerInformation({
            ...pup.form,
            customerCode: props.customerCode
          })
            .then((res: any) => {
              pup.state = false
              proxy.$message(`保存成功`);
              getTbody()
            }).catch(() => {
              pup.loading = false
            })
        } else {
          //新建
          proxy.$api.OrderBusniess.UploadCustomerInformation({
            ...pup.form,
            customerCode: props.customerCode
          })
            .then((res: any) => {
              pup.state = false
              proxy.$message(`保存成功`);
              getTbody()
            }).catch(() => {
              pup.loading = false
            })
        }

      }
    }
  ]
});
//弹窗-保存
const addBtn = () => {
  proxy.$openPup(pupAdd, 1)
}
//获取列表数据
const getTbody = () => {
  if (!props.customerCode) {
    return
  }
  table.loading = true
  proxy.$api.OrderBusniess.PageCustomerInformations({
    ...table.search,
    customerCode: props.customerCode
  })
    .then((res: any) => {
      table.tbody = res.list
      table.search.totalCount = res.totalCount;
      table.loading = false;
    })
}
import { getInformationType } from '@/utils/optionsArr.ts';
onMounted(() => {
  getTbody()
  getInformationType(options, 'type')
});
</script>
